<template>
  <div class="report-form main-box">
    <div class="echarts-one">
      <div v-if="userFrom" id="main" style="height: 600px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
]);
export default {
  data() {
    return {
      userFrom: null,
    };
  },
  created() {
    this.getUserFrom();
  },
  methods: {
    async getUserFrom() {
      const res = await this.$axios.get("reports/type/1");
      this.userFrom = res.data.data;
      console.log(this.userFrom);
    },
  },
  updated() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    myChart.setOption({
      title: {
        text: "用户来源",
      },
      tooltip: {
        trigger: "axis",
      },

      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      legend: this.userFrom.legend,
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: this.userFrom.xAxis[0].data,
      },
      yAxis: {
        type: "value",
        scale: true,
      },
      series: this.userFrom.series,
    });
  },
};
</script>

<style>
</style>